<template>
	<view class="container con_anli">
		<view class="sticky_box">
			<view class="cell_box">
				<view class="keyword_box">
					<u--input
					    placeholder="请输入关键字搜索"
					    border="none"
					    v-model="keyword"
						color="#fff"
					    @change="keywordChange"
						@confirm="handleConfirm"
					  ></u--input>
				</view>
				<view class="cate_sele" @click="show=!show">
					<view class="cell_text">{{selectText}}</view>
					<u-icon name="arrow-down" color="#fff"></u-icon>
				</view>
			</view>
		</view>
		<view class="anli_list">
			<u-row v-for="item,index in anliList" :key="index">
				<view class="anli_item" @click="handleToDetail(item)">
					<view class="item_img">
						<image :src="imgName+item.PicBig"
							style="width: 100%; height: 100%;" />
					</view>
					<view class="item_info">
						<view class="info_title ellipsis">{{item.Title}}</view>
						<view class="info_xinxi ellipsis">{{item.Author}}</view>
					</view>
				</view>
			</u-row>
		</view>
		
		<u-popup :show="show" @close="show = false" :overlayStyle="{'touch-action':'none'}">
			<view class="cate_box">
				<view class="cate_select">选择分类</view>
				<view class="scro0l_box">
					<block v-for="item in filterOptions" :key="item.ID">
						<view class="cateitem" @click="handleSelect(item)">{{item.name.trim()}}</view>
					</block>
				</view>
			</view>
		</u-popup>

		<!-- 加载loading -->
		<kj-loading ref="kjLoading" :loadmore="loadmore" :loaddone="loaddone" :abnor="abnor"></kj-loading>
		<!-- 新增项目 -->
		<view v-if="iscanadd" class="round-click" @click="handleAddProject()">
			<u-icon name="plus" size="20px" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		getPage
	} from '../../utils/config';
	import {
		prosimify,
		$toast,
		http,
		storage
	} from '../../utils/utils';
	import wxApi from '../../utils/wxApi';
	import api from '../../utils/api';
	const app = getApp();
	export default {
		data() {
			return {
				imgName:api.imgName,
				localInfo: {},
				logged: null,
				userId: 0,
				iscanadd: false,
				loadmore: true,
				loaddone: false,
				abnor: false,
				pageIndex: 1,
				ListPages: 0,
				selectId: 0,
				keyword:'',
				anliList: [],
				selectText: '全部',
				show: false,
				filterOptions: [],
			}
		},
		onShow() {
			//判断是否登录
			app.globalData
				.getLogin()
				.then((res) => {
					console.log('登录信息--------->', res)
					this.pageIndex = 1
					this.localInfo = res;
					this.logged = res.code;
					this.userId = res.data.userid;
					// departmentid 1-管理 2-财务 3-监理 4-设计 5-业务
					this.departmentid = res.data.departmentid;
					this.companyid = res.data.companyid;
					this.iscanadd = res.data.iscanadd;
					this.getCaseCategory();
					this.getAnliList();
				}).catch((res) => {
					this.logged = res
					this.goLogin();
				}).finally(() => {
					this.initial = 1;
				});
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			let {
				pageIndex,
				ListPages,
				loadmore
			} = this;
			//未请求完且未在加载中
			if (ListPages > pageIndex && !loadmore) {
				pageIndex++;
				loadmore = true;

				//显示加载效果
				this.pageIndex = pageIndex
				this.loadmore = loadmore
				uni.showNavigationBarLoading();

				//请求数据
				this.getAnliList(false);
			}
		},


		methods: {
			
			/**
			 * 获取案例分类
			 * getcasecategory
			 */
			getCaseCategory(){
				let data = {
					action: 'getcasecategory'
				}
				http.post(api.default, {
					data
				}).then(res=>{
					var options = res.data.data;
					options.forEach(item => {
						item['name'] = item.Title.trim()
					})
					console.log('dayin:then获取首页数据~~~~', options)
					this.filterOptions = options
				})
			},
			
			// 搜索框
			keywordChange(e){
				this.keyword = e;
			},
			
			handleConfirm(e){
				this.keyword = e;
				this.getAnliList();
			},
			
			// 下拉筛选
			handleSelect(item) {
				console.log('select~~~~~~~~~~', item)
				this.selectText = item.name
				this.selectId = item.ID
				this.show = false
				// 重新请求数据
				this.pageIndex = 1
				this.getAnliList()
			},
			
			/**
			 * 获取项目
			 * getcases
			 * cid 分类ID
			 * keyword  关键词
			 * pageindex 当前页码
			 */
			getAnliList(cb = true) {
				let {
					userId,
					pageIndex,
					ListPages,
					loadmore,
					selectId,
					keyword
				} = this;
				let data = {
					action: 'getcases',
					cid: selectId,
					keyword: keyword,
					pageindex: pageIndex,
				}
				http.post(api.default, {
					data
				}).then(res => {
					let {
						data
					} = res.data
					console.log('dayin:获取案例~~~~', data)
					//是否加载完毕
					if (cb) {
						this.anliList = data.list
					} else {
						this.anliList = this.anliList.concat(data.list)
						//隐藏加载效果
						uni.hideNavigationBarLoading();
					}
					this.ListPages = data.pages;

					if (pageIndex == data.pages) {
						this.abnor = false;
						this.loaddone = true;
					}
					if (this.anliList.length < 1) {
						this.abnor = true;
						this.loaddone = false;
					}

					this.loadmore = false;
				})
			},

			// 跳转项目详情
			handleToDetail(event) {
				let item = JSON.stringify(event)
				console.log('00000000000',item)
				let resItem = encodeURIComponent(item)
				
				wxApi.navigateTo( getPage.anliDetail,{item:resItem});
			},

			// 跳转添加案例
			handleAddProject() {
				// wxApi.navigateTo(getPage.editProject, {
				// 	userid: this.userId,
				// 	companyid: this.companyid,
				// 	departmentid: this.departmentid,
				// 	iscanadd: this.iscanadd
				// });
			},


			/**
			 * 
			 * 跳转登录
			 */
			goLogin() {
				console.log('打印-跳转登录~~~')
				wxApi.setStartPage();
				wxApi.navigateTo(getPage.login);
			},
		}
	}
</script>

<style scoped>
	.con_anli {
		position: relative;
	}
	
	.sticky_box {
		box-sizing: border-box;
		position: fixed;
		top: 0;
		z-index: 9;
		width: 100%;
		padding: 0 10px;
		margin: 0 auto;
	}
	
	.cell_box {
		padding: 0 30rpx;
		position: relative;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 94rpx;
		border-radius: 20rpx;
		background-color: #232773;
		color: #fff;
	}
	.keyword_box{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 440rpx;
	}
	.cate_sele{
		display: flex;
		align-items: center;
	}
	.cell_text{
		margin-right: 10rpx;
	}

	.anli_list {
		box-sizing: border-box;
		padding: 20rpx;
		padding-top: 120rpx;
		width: 100%;
	}

	.anli_item {
		overflow: hidden;
		margin-bottom: 30rpx;
		border-radius: 30rpx;
		background-color: #fff;
		width: 100%;
		height: 480rpx;
		box-shadow: 2rpx 2rpx 20rpx 2rpx #dcddde;
	}

	.item_img {
		height: 65%;
		width: 100%;
		/* background-color: #999; */
	}

	.item_info {
		height: 35%;
		width: 100%;
		/* background-color: #333; */
		padding: 20rpx;
	}

	.info_title {
		margin-bottom: 10rpx;
		font-size: 38rpx;
	}

	.info_xinxi {
		color: #999;
	}

	.info_cc {
		color: #999;
	}

	.round-click {
		height: 100rpx;
		width: 100rpx;
		background-color: #232773;
		border-radius: 100%;
		position: fixed;
		bottom: 60rpx;
		right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9;
	}
	
	.cate_box{
		padding-top: 40rpx;
		height: 1000rpx;
	}
	
	.scro0l_box{
		height: 1000rpx;
		overflow-y: scroll;
		overscroll-behavior: none;
	}
	
	.cate_select{
		height: 80rpx;
		text-align: center;
	}
	
	.cateitem{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
</style>
